<!--
 * @Descripttion: 设置密码页面
 * @version: 1.0.0
 * @Author: System
 * @Date: 2025-01-10
 * @LastEditTime: 2025-01-10
 * @LastEditors: System
-->
<template>
  <view class="set-password">
    <!-- 自定义导航栏 -->
    <custom-navbar title="设置密码" />

    <view class="tips">
      <text>设置登录密码后，可使用手机号+密码快捷登录</text>
    </view>

    <view class="form">
      <view class="item d-flex align-items-center">
        <view class="base-icons mima-icon"></view>
        <view class="input">
          <input 
            type="password" 
            v-model="password" 
            maxlength="20" 
            placeholder="请输入密码（6-20位）" 
          />
        </view>
      </view>

      <view class="item d-flex align-items-center">
        <view class="base-icons mima-icon"></view>
        <view class="input">
          <input 
            type="password" 
            v-model="confirmPassword" 
            maxlength="20" 
            placeholder="请再次输入密码" 
          />
        </view>
      </view>
    </view>

    <view class="btn" @click="handleSetPassword">确认设置</view>
  </view>
</template>

<script>
import { setPassword } from '@/api';
import WeValidator from 'we-validator'

export default {
  name: "SetPassword",
  data() {
    return {
      password: "",
      confirmPassword: "",
      validatorInstance: null
    }
  },
  methods: {
    async handleSetPassword() {
      const payload = {
        password: this.password,
        confirmPassword: this.confirmPassword
      }
      
      if (!this.validatorInstance.checkData(payload)) return;

      // 检查两次密码是否一致
      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        })
        return;
      }

      uni.showLoading({
        title: '设置中...',
        mask: true
      })

      try {
        const result = await setPassword(payload);
        uni.hideLoading()
        
        if (result.code == 200) {
          uni.showToast({
            title: '密码设置成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: result.msg || '设置失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '设置失败，请重试',
          icon: 'none'
        })
      }
    },
    initValidator() {
      this.validatorInstance = new WeValidator({
        rules: {
          password: {
            required: true,
            minlength: 6,
            maxlength: 20
          },
          confirmPassword: {
            required: true,
            minlength: 6,
            maxlength: 20
          }
        },
        messages: {
          password: {
            required: '请输入密码',
            minlength: '密码长度不能少于6位',
            maxlength: '密码长度不能超过20位'
          },
          confirmPassword: {
            required: '请再次输入密码',
            minlength: '密码长度不能少于6位',
            maxlength: '密码长度不能超过20位'
          }
        }
      });
    }
  },
  mounted() {
    this.initValidator()
  }
}
</script>

<style lang="scss" scoped>
.set-password {
  min-height: 100vh;
  padding: 0 64rpx;
  background-color: #fff;
  /* #ifdef H5 */
  padding-top: calc(var(--status-bar-height) + 44px + 20rpx);
  /* #endif */

  .tips {
    margin: 0rpx 0 40rpx;
    padding: 24rpx;
    background-color: #FFF7E6;
    border-radius: 12rpx;
    font-size: var(--hui-font-size-26);
    color: #FF9800;
    line-height: 1.6;
  }

  .form {
    margin-top: 40rpx;
  }

  .item {
    margin: 24rpx 0 0 0;
    border-radius: 50rpx;
    background-color: #f7f7f7;
    height: 96rpx;

    .base-icons {
      margin: 0 12rpx 0 32rpx;
    }

    .input {
      flex: 1;
      outline: none;
      font-size: 32rpx;
      color: #333;
    }
  }

  .btn {
    margin: 80rpx auto 0;
    height: 96rpx;
    line-height: 96rpx;
    border-radius: 50rpx;
    font-size: var(--hui-font-size-32);
    display: block;
    background-color: var(--hui-color-primary);
    text-align: center;
    color: #fff;
  }
}
</style>
